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Welcome to Adobe PageMill 

rowsing Web pages is fun and easy—that’s why the Web is so popular. But creating Web 
P ji Jp pages is tedious and error-prone. It requires that you know the Web’s internal language 
(HTML) and addressing schemes (URL), and that you use a variety of converters and 
utility programs. 

Using text editors to create Web pages is like going back to the stone age of word processing. Word 
processor add-on tools are complicated to use, require external browsers to preview pages, and do 
not offer all the Web features you need. 

How do you remove the tedium of creating Web pages? PageMill to the rescue. 

WHAT IS PAGEMILL? 

Adobe PageMill Web Authoring Software includes everything you need to create Web pages in one 
easy-to-use integrated package. You write your pages in what looks and feels like a normal word 
processor—only this one knows about the Web. Your pages appear exactly as they will in a Web 
browser. You can apply styles, place and resize images, and drag and drop parts of your document 
elsewhere. 

Adobe PageMill reads Web pages—even corrects errors in them—and produces output that works 
with any Web server and any Web browser. Creating links is easy, and Adobe PageMill ensures that 
links remain correct as you copy and paste them throughout your Web pages. Using the built-in 
Preview mode, you can even test your pages without leaving PageMill. 

PAGEMILL AND HTML 

There’s no way to predict which Web browser a reader will use to view your Web pages. To ensure 
that pages are displayed correctly, they must be composed in HTML (Hypertext Markup Lan¬ 
guage), a language every Web browser understands. 

The Web browser being used determines much of how your page appears on the screen, including 
the font and size of the text. The size of the window the reader is using determines line breaks. To 
give you some control over how the page looks, HTML defines the basic structure of the page. You 
can assign some text styles, use headings, and determine the relative position of text and images. 
You can also create links, which take the reader from one page to another, and forms, which you 
use to collect information from your readers. 

To use all these features, you must enter HTML codes into your document. With PageMill you 
don’t have to enter the codes, or even know what they are. PageMill produces the correct HTML 
codes when you save your document. 
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If there is something that PageMill does not do, it’s probably because HTML or the Web does not 
yet support it — for example, font selection, precise typography and line breaks, and overlapping 
images. PageMill supports exactly those features that HTML and the Web support, so what you 
see on the screen matches what you see with any Web browser. 

For those of you who have worked with HTML editors, listed below are basics you’ll want to know 
about how PageMill works with HTML: 

• PageMill supports HTML Version 2, along with some commonly used Netscape extensions, 
such as text, link, and background color. Future releases of PageMill will support features from 
HTML Version 3. 

• You cannot view HTML tags from within PageMill. However, since PageMill output files are 
plain text files, you can open them in any text editor if you need to see the HTML codes. 

• You can enter HTML tags directly into a PageMill page using the Raw HTML style. This style is 
displayed on your page in red. 

• If PageMill does not understand an HTML tag, it reads it in and displays it in the Raw HTML 
style (in red). 

ABOUT THIS GUIDE 

This manual includes everything you need to know to create Web pages with Adobe PageMill. 

• “Designing Your Web Site” shows you the basic steps involved in creating a page. 

• “Getting Started” walks you through creating and editing a page. In this section you’ll try out 
many PageMill features. 

• “Using PageMill” contains information about the PageMill windows and shows you how to use 
all the PageMill features. 

• Appendix A is contains solutions to common problems. 

• Appendix B provides some basic information about uploading your Web site to a server. 

• Appendix C is a list of resources you can consult for more information about HTML and the 
World Wide Web. 
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INSTALLING PAGEMILL 
To install PageMill: 

1 Double-click the Install PageMill icon on the Installer Disk. 

2 Select a location for the installation, and then click Install. 

3 Choose one of two options: 

• Install the universal version of PageMill if you plan to use this installation on different types of 
Macintosh computers. (This will use about 1 MB of disk space.) 

• Install a specific version of PageMill if you plan to use this installation on your computer only. 
When the installer has finished the installation, PageMill is ready for use. 






Chapter 1: Designing Your Web Site 



f you’ve never designed Web pages before, you’ll find this overview of the page-authoring 
process helpful. You’ll want to consult the other sections of this book for in-depth infor¬ 
mation. You can also find information about site design and organization in many of the 


resources listed in Appendix C. 


STEP 1: SKETCH THE PAGE LAYOUTS AND LINKS 

Before you begin producing Web pages, you should have a basic idea of how your pages will look 
and how they will link together. Draw a rough sketch of each page, blocking out areas for text and 
images. Decide where you will place links and what tools you’ll provide for navigating among the 
pages. 


STEP 2: GET ORGANIZED 

When you transfer your Web presentation to the server, you want to make sure that all the required 
files are included. Therefore you should set up the folders you’ll use to store your pages and images 
before you begin creating pages. 

Start by creating a “root” folder on your hard disk for your entire Web site. As you create additional 
folders for pages and images, place them in the root folder. 

Next, use the Preferences command on the PageMill Edit menu to set up a default folder for the 
image files PageMill creates when it converts imported images to the GIF format. (See “Working 
with Images” later in this guide for information about image file conversion.) Make sure this 
folder is included somewhere inside the root folder you created. 

Then locate any existing images you want to include on your Web pages and move them into a 
folder that is included in your Web site root folder. 

Getting organized at the beginning will ensure that when you upload your Web site to the server, 
all the required elements will be there. 


STEP 3: LAY OUT THE PAGES 

Open a new page, and add text and images following the sketches you made in Step 1. Remember 
to save your work often. 







designing you R WES SITE 


As you design Web pages, pay attention to styles and the relative location of elements (which you 
an control), rather than fonts and line breaks (which are controlled by the browser and the she 
of the viewing window). Use styles for impact, especially headings. Try to "chunk” the text, using 
horizontal rules as dividers so the page doesn’t look too dense. If there's too much text on the page 
divide the topics into separate pages and link them. P 8 ’ 

You might want to design your Web site in stages, starting with very simple pages and gradually 

‘ " g com P exit Y a nd flashy images. As you complete each stage, you can replace the previous 
version on the server. icpicviuus 

PageMill Preview mode looks like the Netscape browser. If you suspect that readers will be viewing 
your pages with other browsers: ° 

• Avoid using Netscape-specific features like background colors. 

* Where P° ssible > test your pages locally with other browsers before you upload them to 

the server. r 

STEP 4: ADD LINKS 

SmSSSSS* >■»■" i~ ge „ pt , , nd , he „ 

STEP 5: SAVE YOUR PAGES AND UPLOAD THEM TO THE FILE SERVER 

You use PageMill to create pages for your Web site, not to upload them to the server. When you 
are satisfied with your pages, you can quit PageMill and upload your Web site. You’ll find some 
information about uploading Web sites in Appendix B. You can get more detailed information 
from your Internet provider or by consulting the resources listed in Appendix C 


Chapter 2: Getting Started 


■ U his section leads you through the basic PageMill authoring techniques. When you 
' •>■>-') complete this tutorial, you’ll be able to start creating your own Web pages. 

There is a small Web site included with PageMill that you can use to work through this section. 
You’ll find three pages: EWHome.html, EWAccessories.html, and EWDummy.html (included as a 
page for links to point to). There’s also an Images folder, which contains the images used in the 
pages. This sample Web site is in a folder called EarthAndWare. 

OPENING A PAGE 

1 Start PageMill. 

2 From the File menu, choose the Open command (9S-0). 

3 Use the standard file dialog box to locate and open the EWHome.html document. 

The document looks the same as when you view it in a Web browser. By default, existing docu¬ 
ments are opened in Preview mode. Preview mode allows you to follow links within your site. 


















EXPLORING LINKS 

Take a minute to look at the page. Some text appears underlined. This indicates that the text is a 
link. You click the link to go to the page referenced by the link. 



As you move the cursor around the page, the cursor changes to a pointing hand whenever you pass 
over a link. In addition, text appears in the Link Location Bar at the bottom of the page. This bar 
displays the address of the link, otherwise known as a URL (Universal Resource Locator). 

Click the Accessories” link. The destination page appears in a new window, stacked on the origi¬ 
nal page. When you click links, a new window opens for each page, making it easy for you to edit 
several pages simultaneously. 

Close the Accessories page. 


CHANGING TO EDIT MODE 

PageMill has two modes: Preview and Edit. The current mode is indicated by the button in the 
upper right corner of the window. 

e "p ^he globe at the upper right of the page indicates that you are in Preview mode. As 
| you just saw, Preview mode simulates how the page looks and behaves when viewed in a 
' I ^ e b browser. Links work just as they would when viewed in a browser. Existing pages 
always open in Preview mode. 

Click the globe to change to Edit mode. 



The icon changes to a pen and paper. In Edit mode, you can enter and edit text, 
manipulate images, and create links. 


EDITING TEXT 

Editing text in PageMill is just like using a word processor. 
1 Select the first sentence in the first paragraph of text. 


2 From the Style menu, choose the Italic command (9L-I). 



3 To remove the italic style, select the same text and choose the Italic command again from 
the Style menu (Shift-3€-I). 

4 With the text still selected, drag it to the end of the paragraph and drop it there. 






-n -c- unua- . 


5 To move the text back to its original position, choose the Undo command from the Edit 
menu (3£-Z). 


MOVING AND RESIZING AN IMAGE 

Working with images is as easy as working with text. You can move and resize images in PageMill. 
1 Click the picture of the boots to select it. 



2 Drag the image to the right of the Herbs link and drop it there. 
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GETTING STARTED | 


3 To return the image to its original position, choose the Undo command from the Edit menu 
(3S-Z). 

4 Select the image again and drag one of the selection handles to make the image smaller. (You 
can proportionally scale the image by holding down the Shift key.) 



Now you know how to edit text and manipulate images in PageMilJ. 

COPYING TO THE PASTEBOARD 

The pasteboard is a “holding area” where you can store page elements until you are ready to use 
them. You’ll place an image on the pasteboard so you can use it later in another page. 

1 To open the pasteboard, choose the Show Pasteboard command from the Window menu (3S-/). 

2 If necessary, move the pasteboard so you can see the boots image. 

3 Drag the selected image onto the pasteboard. 


ii 


i 

4L 


\1 ’ (5 


Now you’ll create a new page. 

CREATING A NEW PAGE 

1 From the File menu, choose the New Page command (SS-N). 

2 Position the empty page so you can also see the EWHome page at the same time. 

3 Go back to the original page, select the earth & ware banner, and drag it onto the new page. 
Note: IJ you have a small screen, you may find it easier to copy and paste from one page to the other. 
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4 Click the page outside the banner and press Return to move the insertion point to a new line. 

5 Select the first paragraph of text on the original page and drag it to the new page. 

6 Move the insertion point down the page and drag the image from the pasteboard onto the 
new page. 

7 Close the pasteboard. 

8 With the insertion point to the right of the image, type a line of text. 



Our fins quality gardeitiing;!jobt3 are guaranteed jorkeep ycur feet'^raxm artd.dfy. 


Now you’re ready to add some links. 

CREATING LINKS 

A link takes you from one page (the source) to another (the destination). The destination can be 
on the same page in your Web site, another page in your Web site, or somewhere else on the Web. 

PageMill offers a variety of ways to insert links on a page. In this tutorial, you’ll enter links in three 
different ways. Check the “Working with Links” section of this manual for more information 
about links. 

a In the upper left corner of the page, below the button bar, there is a page icon. One of the 
easiest ways to create a link is by dragging a page icon. The icon on the new page you’re 
working on is blank because you have not saved the page yet. You’ll use the icon from the original 
sample page. 
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GETTING STAR TED , 

1 On your new page, select the word products to be the source of the link (the text you want 
displayed with an underline). You can select a single word or as many words as you like. 

Welcome to onr online catalog. Ton will find all onr Bggnig H can be ordered 
quickly and conveniently via this web baaed catalog. :, '! 

2 Drag the page icon from the original sample page onto the selected text. 



The selected text turns blue and is underlined, indicating that it is linked. You’ll test the link in a 
minute. First, try another method of linking. 

If you know the link’s address (URL), you can type it directly into the Link Location Bar at the 
bottom of the page. 

1 Select the text that will be the source of the link and press Enter. 

2 Type the address of the link, in this case “EWHome.html”, and press Return. 



Once again, the selected text becomes a link. Now try the third method before testing the links. 
You can also copy a link from another page and paste it into the page you are working on. 

1 Go back to the original sample page and select the Accessories link. (You can easily select an 
entire link by triple-clicking.) 

2 From the Edit menu, select the Copy command (96-C). 
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3 Return to your new page, position the insertion point where you want to insert the link, and 
select the Paste command from the Edit menu or press 36-V. 





AccessQjffes \'T : 


and dry) 


The link is inserted just as it appeared on the sample page. You can edit the link text without 
destroying the link. 

Switch to Preview mode and test the links by clicking on them. As you see each linked page appear, 
close it to reduce the clutter on your screen. 


INSERTING A PICTURE AND MAKING ITS BACKGROUND TRANSPARENT 

Next you add a graphic to the page. 

1 Return to Edit mode (click the globe) and move the insertion point down the page. 

2 Open the Scrapbook. 

3 Drag the picture of the sun from the Scrapbook onto the page and close the Scrapbook. 

Most Web browsers can only display images in GIF or JPEG formats. When you bring an image 
into PageMill, it is automatically converted into a GIF file and deposited in the folder you specified 
for images in the Preferences dialog box. 

| — j 4 To center the image, select it and click the Center Align button on the button bar. 

To make the image blend in with the page, you can give it a transparent background. To do this, 
you use the out-of-p!ace image view. 





















GETTING STARTED 
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5 Double-click the image to open the out-of-place image view. 



|crap| 6 Click the transparency tool and then dick the background color of 
Mail the image. 

The background turns to the same color as the page background. 

7 Save your changes by using the Save command from the File menu (38-S). 

8 Close the image view (3S-W). 

The image now blends into the page. 


CHANGING THE TEXT COLOR AND PAGE BACKGROUND 

Before you save the page, add some final polishing. 

You use the PageMill Attributes Inspector to specify attributes associated with the entire page, 
selected text, or a selected object (such as an image, a horizontal rule, or a form element). Note 
that the Attributes Inspector is displayed only when PageMill is the active application. 

1 With the image selected, choose the Show Attributes Inspector command (3€-;) from the 
Window menu. 

Ejngj 2 Display the Page Attributes by clicking the page button. 


3 Choose a text color by setting the Text popup menu to Custom and selecting a color from the 
color picker dialog box. 



4 In the Finder, locate the file named “paperl.gif”. 

5 Click your PageMill window to make it active. 

6 Drag the paperl.gif icon into the image well in the Page Attributes Inspector. 

The image is tiled to become the page background. 

7 Close the Attributes Inspector and the page. (You can save the page if you wish.) 

That’s how easy it is to create a Web page with PageMill. You can continue to the next section to 
see how you create forms with PageMill, or start creating your own Web pages right away. In either 
case, you may find it helpful to take a few minutes to scan the rest of this manual to learn more 
about PageMill. 

CREATING A FORM 

There are two parts to creating an interactive form for the Web: laying out the form elements and 
preparing a script to collect the information in the form. PageMill helps you with the form layout, 
but you’ll need programming assistance to prepare the script. For more information, see “Working 
with Forms” later in this guide. 

To create a form: 

1 Start your form by opening a new page in PageMill (DS-N). 
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2 Choose the Large heading format from the Format menu (Option-S-3). 


pa 


Indent Left 
Indent Right 

m 



Paragraph 




aai 


Smallest 


Preformatted 


Smaller 

*^5 

Address 


Small 


List 

► 

•/Large 

■^9$ 3 



Larger 




Largest 

1 


3 Type the following text field labels, pressing Return after each one to move to a new line: 

Name?j 




til 


| j^ j 4 Position the cursor after “Name:” and click the Insert Text Field button to add a one-line 
- 1 fill-in text field. (Notice that as you move the cursor over the buttons, a brief description 
appears to the right of the button bar.) 


® I® |Q|m|K8i|B|GD|(E)| 


5 Select the text field and copy it to each of the other labels you entered by holding down the 
Option key while you drag. 




6 Resize the Age field by selecting it and dragging the selection handle to the left. 



7 Double-click the Name text field and type “Enter your name here.” Repeat this for the phom 
field, entering the appropriate text. 



incai, you auu a popup 

1 Move the cursor to the end of the Signature field and press Return to move down the page 


2 Type “Select your favorite color:” and press Return. 

^=n 3 Click the Insert Popup button to insert a popup menu. 




liIOilMilOKi 
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GETTING STARTED 


5 Choose the Select All command from the Edit menu (3€-A) and type a list of colors. Press Rett 
after each entry to enter the next one. 


Select your favorite color: 

rRed^v' ... 

Green 

Blue ■ 

Vellotu 


6 Set the default option by carefully dragging the triangle next to the list. Click outside the popup 
to see the new default. 


Select your; favorite color; 

Red ■ 

1 Green jD; '/• 

j Blue ▼ j . 

! Yellow I' 


Select your favorite color: 

Blue. y| ' '"f'f 


You can easily turn a popup into a list selection field. 

1 Select the popup and resize it by dragging the selection handle. 


Selectyour fayorite color: 
I Blue ▼] f| 

j ~. .. * 

! 




Red 

Green 

m 


f. 

| Vellouu 

j>|; 



mMSlmrn 


2 Select the Undo command from the Edit menu (S6-Z) to return to a popup display. 
Now you add a radio button group: 

1 Position the cursor at the end of the popup and press Return to move down the page. 
I I 2 Click the Insert Radio Button button. 


Radio buttons work as a group. The reader can select only one button in the group. To make sure 
the buttons are grouped, you must copy the original one, rather than inserting a new button. 
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3 Create two more radio buttons by selecting the original radio button and holding down the 
Option key while you drag. 


0:60 


4 In the Finder, locate“flowerpots.gif”, “basket.gif”, and “3tools.gif” and drag their icons onto 
the page. 

5 Select each image and use its selection handles to make it much smaller (button size). 

6 Drag one of the images into place next to the first radio button. Drag the other images into place 
alongside the other two radio buttons. 



A few more steps and your form will be complete and ready to test. 

1 Move the cursor down the page. 

2 Click the Insert Submit Button button and double-click it to edit its text. 


3 Double-click again to select the word Submit. 
gaaggA . m 


i ■: ■ -t. 

4 Type “Send the information” Notice how the button expands to accommodate the text. 

) ( Send the information ] . 

5 Click outside the button and then select it again. 

|;.~sr | 6 Click the Center Align button to move it to the center of the page. 

The form is complete. You can test the form by changing to Preview mode and checking how the 
fields work. You’ll find more information about forms and collecting data under “Working with 
Forms” later in this guide. 







Chapter 3: Using PageMill 



his section provides information about all the PageMill features. 

PAGE VIEW 


The page view is where you compose your Web pages. The page view is a WYSIWYG editor. In the 
page view you manipulate objects using the selection handles or by double-clicking. Each page 
view tool is identified in the illustration below. You’ll find information about using these tools in 
the procedures later in this section. 



between 
mode and 
Preview mode 


Insert horizontal rule 

Insert from elements 


Link location bar 


Align images 
Align text 


Page 

Icon 

Page 

title 
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IMAGE VIEW 

To open the image view, you double-click an image. In the image view, you can create image-map 
hot spots and add links, make the image background transparent so it blends in with the page, and 
determine how to display the image in a browser. You can also drag an image icon from the image 
view to any page. 


Image icon 
Image format 


Hot spot tools 

Transparency wand 

Layering tool 
Hot spot color 
Hot spot label toggle 
Interfacing toggle 

Zoom 

scale 

Zoom 



icon 


Note: If the image is in JPEG format, the transparency wand and interlacing toggle are not available. 


MENUS 

This section briefly explains each PageMill menu command. You’ll find more information about 
using the commands under the “Working with” headings later in this section. 

File Menu 

The File menu contains standard Macintosh commands for opening, saving, and printing files. 


Choose: 

New Page (3S-N) 
Open (3€-0) 
Close (3€-W) 
Save (St£-S) 


Save As... 

Save A Copy As... 
Revert to Saved 


Page Setup 
Print (X-P) 
Quit (SIS-Q) 


Start a new Web page. 

Open an existing HTML, GIF, or JPEG file. 

Close the current window. 

Save the current page or image. If you’re saving a page, 
PageMill automatically adds the HTML suffix to the 
filename. 

Save the current page under a new name. 

Save a copy of the current page or image. 

Go back to the last-saved version of the current page 
or image. 

Set printing options. 

Print the current page. 

Exit from PageMill. 


Edit Menu 

You use the commands in the Edit menu to cut, copy, and paste page elements, remove links, show 
anchors, and set preferences. 


Choose: 
Undo (3€-Z) 

Cut (3€-X) 


Copy (3S-C) 
Paste (3?-V) 


Select All (3f!-A) 
Remove Link (98-R) 


Reverse your last action. 

Remove the selected item from the page and place it on 
the Clipboard. 

Place a copy of the selected item on the Clipboard. 

Insert a cut or copied item from the Clipboard. 

Delete the selected item. 

Select all the elements on the current page. 

Remove the selected link, or turn off the link while typing. 
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Show/Hide Anchors (3€-,) Show or hide the anchors on a page. See “Working with 

Links” later in this section. 

Preferences Turn the page flipping sound on and off. 

Set the line break format to Macintosh, UNIX, or DOS as 
appropriate. 

Choose ,html or .htm as the default file suffix. 

Specify the folder where the images that PageMill converts 
are to be saved (as well as associated image maps). Be sure 
this folder is included in your Web site folder. See “Working 
with Images” later in this section. 

Select CERN or NCSA as the image-map format. (See 
“Creating an Image Map” later in this section.) 

Specify the root folders on both your editing machine and 
your server machine, in order to create proper image-map 
files. 


Style Menu 

The following table shows how each style is displayed in PageMill. When viewed in a Web browser, 
the display of a style may vary. See "Assigning Styles” later in this guide. 


When You Assign: 

Plain (Shift-3£-P) 

Bold (J8-B) 

Italic (SHS-I) 

Teletype (Shift-36-T) 
Strong (Shift-36-S) 
Emphasis (Shift-SHI-E) 
Citation (Shift-JS-C) 
Sample (Shift-36-A) 
Keyboard (Shift-3£-K) 
Code (Shift-3£-0) 
Variable (Shift-38-V) 
Raw HTML (Shift-3€-H) 


You See: 

Plain text. To remove another style, assign Plain. 
Bold text 
Italic text 

A monospaced typewriter font 

Displays as bold in PageMill 

Displays as italic in PageMill 

Displays as italic in PageMill 

Displays as monospace in PageMill 

Displays as monospace in PageMill 

Displays as monospace in PageMill 

Displays as italic in PageMill 

<Appears in red, enclosed in angle brackets> 
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Format Menu 

When you assign a format, it always applies to the entire paragraph. Like the Style menu com¬ 
mands, the Format menu commands may produce different results, depending on the browser 
used to view the Web page. See “Assigning Formats” later in this guide. 


Choose: 

Indent Left (8£-[) 
Indent Right (3S-J) 


Paragraph (Option-SS-P) 
Heading 

Preformatted (Option-St-F) 

Address (Option-3€-A) 

List 


To: 

Move the selected paragraph to the left. 

Move the selected paragraph to the right. 

Note: The Indent Left and Indent Right commands use the 
HTML <blockquote> tag. Some browsers may not display this 
format as an indent. 

Remove another format from the selected paragraph and 
return to Plain style. 

Choose a heading size. See “Working with Text” later in 
this section for information about headings. 

Display text in a monospace font so spaces and multiple 
returns remain intact. 

Displays in italic in PageMill. 

Choose from six list formats. See “Working with Text” 
later in this section for information about list formats. 


Note: Browsers automatically add white space between paragraphs that have different formats. 
PageMill also adds space between paragraphs if their formats are different. If you assign the same 
format to adjacent paragraphs, the space disappears. 




Window Menu 

You use the commands on the Window menu to open and close the pasteboard and the Attributes 
Inspector, as well as to arrange windows on your desktop. 

Choose: To: 

Show Pasteboard (3S-/) Display the pasteboard, a “holding area” for page elements. 

See “Pasteboard” later in this section. 

Show Attributes Inspector (SK-;) See the attributes assigned to a page, text, or an object. See 

“Attributes Inspector” later in this section. 

S tac k Display open windows in cascading style so you can see the 

title bar of each window. 

I i* e Display open windows as tiles, so they are all visible 

simultaneously. 

Close All Close all open windows. 

Open Windows List See a list of open windows. If a window’s content has changed 

but it has not been saved, its name is underlined. Choose a 
window from the list to make it the active window. 

ATTRIBUTES INSPECTOR 

The Attributes Inspector is a floating panel you use to set the attributes for the whole page, selected 
text, or the selected object (an image, a horizontal rule, or a form element). 

When you open the Attributes Inspector (8S-;), the panel appropriate for the selected element 
appears. You can use the button bar in the Attributes Inspector panel to toggle among the page, 
text, and object attributes. As you move around the page, the panel changes to reflect your 
selection. 

When working with the Attributes Inspector, you must press the Return or Enter key to record 
changes to a text field. If you click outside the field before pressing Return (or Enter), the field is 
reset to its previous value. 

The Attributes Inspector only displays information when the active window is a page view in Edit 
mode. If the selected item is not a single object, the Object Attributes button is disabled. 

The Attributes Inspector panels for a page and text are shown here. The Image Attributes Inspec¬ 
tor is discussed in “Working with Images,” and the panels for form elements are discussed in 
“Working with Forms” later in this section. 


Page Attributes 


Switch to Text 
attributes 


Switch to Object i - Specify the location 
attributes of a CGI script 
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Select 


Select 


text color 


link color 


Specify how a 
form communicates 
with the CGI script 

Drag an Image here 
for a page background. 
Click the trashcan to 
discard it. 


Text Attributes 



Make the selected 
text a link by 
entering a link address 


Select styles, 
alignment, 
and formats 


PASTEBOARD 

The pasteboard is a “holding area” for page elements. It is a convenient place to put elements you 
use frequently in your pages. For example, if you place a navigation bar on the pasteboard, you can 
easily insert it in your Web pages as you create them. 

You can drag any selection to the pasteboard, including text, images, and links, and then drag it 
onto a page (or multiple pages). When you drag an item to the pasteboard, a copy of the item is 
placed there. When you drag an item from the pasteboard, you can simply drag the element to 
move it, or hold down the Option key and drag to copy it. The pasteboard can contain a maximum 
of five pages, and its contents are saved between PageMill sessions. 
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WORKING WITH TEXT 

Adding text to your Web page is the same as adding text to any document. You can type it, or cut 
and paste it, or drag it from another page or application. The difference comes when you format 
and style the text. 

Since the actual appearance of your page depends on the browser that is displaying it and the size 
of the browser window, you cannot predict where lines will break or how large the text will appear. 
To solve this problem, HTML offers a limited number of styles and formats that define the page 
structure rather than its specific layout. PageMill supports all the HTML 2.0 styles and formats. 

You can leave other applications (PageMaker, QuarkXPress, Microsoft Word, etc.) open while you 
work in PageMill so you can easily copy and paste text onto your pages. Because of the limitations 
of HTML, most formatting will be reset to plain text and some special characters will be lost (for 
example, most ligatures). 

You can drag and drop images from Adobe Photoshop 3.0.4 directly into PageMill. If you are using 
Adobe Illustrator, you can convert and copy paths into an image by pressing Option-K-C. This 
will convert the current Illustrator selection into a PICT image. Then you can paste the image into 
PageMill. 


Assigning Styles 

HTML supports tags for physical styles and logical styles. When you assign a physical style, you 
change the appearance of the selected text. When you assign a logical style, the browser used to 
view the page determines how that style is displayed. For example, if you use Italic, a physical style, 
generally the text will appear in italics when viewed with any browser. If you assign Emphasis, a 
logical style, the browser may display the text in italics, use an underline, or choose some other 
device to make it stand out on the page. In general, it is better to use physical styles; browsers may 
produce unpredictable results if you use logical styles. You assign styles by using the commands 
on the Style menu. 


The physical styles are shown here as they appear in PageMill: 



The names of the logical styles indicate their purpose. For example, you would use Emphasis for 
text that you want to stand out on the page, Citation to reference the source of the text, or Code if 
your page includes lines of program code. Each logical style is shown here as it appears in PageMill, 
but it may look different when viewed with a Web browser. 




You can insert HTML tags directly into your page by using the Raw HTML command. These tags 
appear in red and enclosed in angle brackets, just as you type them. 



The Raw HTML style is useful for entering tags that are specific to a particular browser or server 
tool, or for tags that PageMill does not yet understand. 

You can also enter tags that PageMill does understand, such as <HR> or <BR>. But if you do this, 
the next time you load the page these tags will not appear as raw HTML—PageMill will interpret 
the tags instead. 

Note: No error checks are performed on raw HTML code, so enter tags carefully. 

Setting Text Colors 

PageMill supports the Netscape extension that allows you to set the text color as well as colors for 
the active, normal, and visited links. 

To set text color and link color: 

1 Open the Attributes Inspector and click the Page icon. 

2 Select Custom in the Text popup menu and then choose a text color from the color picker 
dialog box. 

3 Set the popups for Normal, Active, and Visited links to Custom and choose a text color for each. 
As soon as you change the color in the popup, the new color is displayed on the current page. 
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Entering Special Characters 

You enter accented characters on a page the same way as in any other Macintosh application. 
PageMiil automatically converts extended characters into the appropriate ISO encoding when it 
writes the HTML file. If you try to insert a character that cannot be represented in HTML, the 
character is filtered out when you paste or drag it from the outside. 

ASSIGNING FORMATS 

In the same way that the appearance of styles may vary depending on the Web browser, so does the 
display of formats. For this reason there are only a few formats you can control when you create 
Web pages. You assign formats using the commands on the Format menu. Formats affect the 
entire paragraph. 

Indent Right and Indent Left 

To change the horizontal position of text on the page, use the Indent Right and Indent Left com¬ 
mands. Both of these commands affect the margins on both sides of the text, so the text area 
becomes narrower or wider. The actual increment of the indent depends on the browser used to 
view the page (and could be zero). 



Paragraph 

Use the Paragraph format to “turn off” another assigned format and return it to unformatted text. 
For example, if you create a bulleted list and then decide it would be better to present the infor¬ 
mation as regular text, select the list and choose the Paragraph command. 

Heading 

Since you cannot control the text font size, the Heading format provides a way to add impact to 
your page and identify the content of different sections. You can choose from six heading sizes, 
defined in increments of “larger” and “smaller.” Heading sizes are relative—-the actual display size 
depends on the browser used to view the page. You would generally use the largest size as the main 
heading on the page and the other choices for subheadings. 


This is how heading sizes appear in PageMiil Preview mode: 



Preformatted 

Normally, browsers collapse multiple spaces and return characters into a single space. If you need 
to ensure that a block of text retains its original spaces and returns (for example, a data table where 
the columns must line up), use the Preformatted style. Browsers display Preformatted text in Cou¬ 
rier or another monospace font. 

Address 

It is good practice to insert your Internet address at the bottom of your pages so readers can con¬ 
tact you for further information. You can use the Address format for this purpose. In PageMiil, the 
address appears in italics. It may look different when viewed in another browser. 

This is how an address appears in PageMiil: 



List 

You can select from several list formats, depending on the purpose of your list. As with all formats, 
the list display may vary depending on the browser used to view the page. 

The easiest way to create a list is to type each item in the list, select all the items, and then choose 
the list format you want to use. 
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The Bullet, Menu, and Directory list formats all convert the selected items into a bulleted list. 



The Term and Definition formats were designed to work together to present glossary-type infor¬ 
mation. Term positions the selection flush with the left margin of the page. Definition indents the 
selection. 




Use the Numbered format to convert the selected items into a numbered list. PageMill inserts hash 
marks next to each item in the list. When the list is viewed in a browser, the correct numbers 
appear. 
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INSERTING HORIZONTAL RULES 

Horizontal rules are useful for dividing your Web page into sections. 


3 Type a new size for the rule to increase or decrease its thickness. 

4 Type a percentage into the Width field to indicate how far across the page you want the rule to 
extend. Remember to press the Return (or Enter) key. 



ADDING BACKGROUND COLORS AND IMAGES 

PageMill supports the Netscape extension that allows you to set the page background color. You 
can also use an image as a background for the page. 

To change the page background color: 

Hgp| 1 Open the Attributes Inspector and click the Page icon. 

2 Select Custom in the Background (Bkgrd) popup, and then choose a background color from the 
color picker dialog box. 

To use an image as a background: 

jgipjlj 1 Open the Attributes Inspector and click the Page icon. 

2 Drag an image into the image well at the right side of the Attributes Inspector. 

To remove the image from the background, click the trashcan. 

WORKING WITH LINKS 

A link takes you from one page (the source) to another (the destination). The destination can be 
on the same page in your Web site, another page in your Web site, or anywhere else on the Web. 


To insert a horizontal rule: 

1 Position the cursor where you want to insert the rule. 

2 Click the Insert Horizontal Rule button. 

You can change the size (thickness) and width of a horizontal rule by selecting the rule and drag¬ 
ging the selection handles, or by using the Attributes Inspector as follows: 

1 Select the rule you want to edit. 

2 Open the Attributes Inspector (J?-;) and display the Object Attributes. 


When you create a text link, it appears as underlined blue text on the page. When you link an 
image, the image is outlined in blue. When you’re in Preview mode and pass the cursor over a link, 
the cursor changes to a pointing hand. 

You can also set up images as image maps with multiple links. To find out about creating image 
maps, see “Working with Images” later in this section. 

Anchors 

Anchors are locations within a page that can serve as link destinations. The difference is that you 
can use an anchor to link to a specific place on a page instead of simply to the top of the page. 
Anchors can be used to link to another page or to a different location within the same page. For 


















example, if your page is very long, you may want to include links from information at the top of 
the page to information at the bottom. You could include links in a table of contents or a naviga¬ 
tion bar at the top of the page that direct the reader to information at the bottom of the page. 

To create an anchor, simply drag the page icon to somewhere within its own page. After creating 
an anchor, you can drag it to another page or to another location on the same page. 

Use the Show/Hide Anchor command from the Edit menu (36-,) to see the anchors while you work 
with them. Anchors are always hidden in Preview mode. 

Creating a Link 

When you create a link, start by determining its destination-locate the page you want to link to or 
create an anchor to use as the destination. Then select the source of the link-the text or image the 
reader will click to get to the destination. Finally, do one of the following: 

• Drag something representing the destination (page icon, image icon, anchor, another link, etc.) 
to the selection and drop it. 

• Type the address of the link in the Link Location Bar. 

• Use the style panel of the Attributes Inspector. 

Whenever you drag and drop a page, anchor, or image icon onto a selection, PageMill turns the 
selection into a link to that object. If an icon is dropped somewhere outside a selection, PageMill 
attempts to insert an object at that new location; the specific result depends on the type of icon 
being manipulated as well as the location of the drop site. (For example, dropping an image icon 
will cause the image to be inserted.) 

However, you can override any default behavior to force a link to be created simply by holding 
down the command key while dragging. If the object you are dragging can be linked, PageMill 
inserts a link at the drop site. For example, dragging an anchor to another location within the same 
page just moves the anchor; holding down the command key will force a link to the anchor, instead 
of moving the anchor. 

Methods for linking 

To create links in PageMill: 

• Drop a page, anchor, or image icon onto a selection. 

Select the text or image you want to use as the source of the link. Drag the destination page, image, 
or anchor icon and drop it on the selection in the source page. (Note: if there is no page icon for a 
page, save the page and the icon will appear.) The selection appears as underlined blue text or as 
an image outlined in blue. 


• Drag a page or anchor icon to a different page. 

Drag the page or anchor icon from the destination page to the source page, without dropping it 
on a selection. PageMill inserts the title of the page or anchor as the link. (You can then edit or 
move this new link text without breaking the link.) 

• Command-drag a selected anchor or page icon within the same page. 

To create a link to an anchor within the same page as the anchor, begin by selecting the anchor, 
then hold down the command key (36) and drag the anchor icon elsewhere in its page. PageMill 
inserts the anchor name as the link text. (You can then edit or move this new link text.) 

To create a link to the page itself, hold down the command key and drag the page icon into its page, 
without dropping it on a selection. PageMill inserts the page title as the link text. 

• Command-drag an image or an image icon. 

To create a link to an image, hold down the command key (36) and drag the image or its image 
icon onto the source page. This instructs PageMill to create a link to the image rather than to insert 
the image itself. 

• Copy and paste a link from one page to another. 

If you want to use a link from another page, select the link (you can triple-click as a shortcut to 
select the entire link), copy it, and paste it onto the new page. 

• Drag and drop a link. 

Select a link (you can triple-click as a shortcut to select the entire link) and drag it to another loca¬ 
tion on the same page, or to another page. 

• Type the link address (URL) directly into the Link Location Bar. 

When you are in Preview mode and you pass the cursor over a link, the link’s address (URL) 
appears at the bottom of the page view in the Link Location Bar. When you are in Edit mode, you 
can type an address into this area. 

Select the source text or image you want to link, click to the right of the globe, and type the address 
of the destination page (or copy and paste or drag and drop the address). You can also select the 
text and press Enter to move the cursor to the Link Location Bar. When you press Return after 
entering the address, the selection turns blue to indicate it is linked. Note that if an address is 
already present within the Link Location Bar, you can drag the world icon and drop it inside a page 
as a shortcut for creating another link to the same address. 
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• Copy and paste or drag a link address into the Link Location Bar. 

If you are dragging an address from another page, you can use the small globe as a drag icon for 
the displayed URL. 

• Type the link address into the Text Attributes Inspector. 

Select the text that will be the source for the link. Open the Attributes Inspector and display the 
Text Attributes. Click the Location text box, type the destination page address, and press Return. 
The text turns blue to indicate it is linked. If no text was selected, the address becomes the link and 
is placed at the insertion point. You can edit the linked text. 

Deleting a Link 

To delete a link, triple-click to select the link. Then do one of the following: 

• Press Enter to move the cursor to the Link Location Bar, press Delete to clear out the link 
address, then press Return to complete the action. 

• Click in the Link Location Bar, press Delete, then press Return to delete the link. 

• Use the Remove Link command from the Edit menu (3€-R). 

Link Tips 

• To select an entire link, triple-click it. 

• To test a link, change to Preview mode and click the link. 

• For convenience, create a page containing frequently used links, ready to copy and paste onto 
other pages. 

• Place frequently used links on the pasteboard so that they are ready to drag into other pages. For 
example, if you place a navigation bar on the pasteboard, you can easily insert it in your Web pages 
as you create them, instead of re-creating each link in the navigation bar. Drag the link to move it; 
use Option-drag to copy it. 

• To link text at the top of a page to other locations on the page, start by creating a table of contents 
or navigation bar at the top of the page. Then create anchors on the contents or navigation bar 
entries by dropping the page icon. Cut and paste the anchors into the appropriate locations at the 
bottom of the page. 

• Change the color of the link text for a page by opening the Attributes Inspector, displaying the 
Page Attributes, and selecting a Custom color for Normal, Active, and Visited links. 

• To see the URL for a link while in Edit mode, triple-click the link to select it and look at the Link 
Location Bar, or look at the Location field in the Attributes Inspector. To see the URL for a link 
while in Preview mode, simply pass the cursor over the link. 
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• If you drag a link from Netscape, it drags the explicit text of the URL underlying the link. In 
PageMill you can select the text you want to link, drag the link from Netscape, and drop it in the 
Link Location Bar at the bottom of the page view. 

• If you are using Netscape, you can also copy links from the Netscape bookmarks file (located in 
the System Folder:Preferences:Netscape fiBookmarks.html). Don’t modify the Bookmarks file; 
just use it as a source to copy links from. Open the Bookmarks.html file in PageMill and copy the 
links you want into your page. 


WORKING WITH IMAGES 

You can use images in several ways in your PageMill pages: 

• As static pictures, used only to enhance page design. 

• As links to other pages. See “Working with Links” later in this section. 

• As image-maps with multiple links to other pages. See “Creating an Image Map” later in this 
section. 

• As submit buttons on forms. See “Working with Forms” later in this section. 


Image Formats 

Web browsers can display images in GIF or JPEG format. If your images are in PICT format, 
PageMill automatically converts them into GIF format and saves a copy as a file in the image folder 
you specify in the Preferences dialog box. Copies are saved as Imagen.gif (Imagel.gif, Image2.gif, 
etc.). The default folder, located on your hard disk, is called Images. It is a good idea to change the 
default setting to a folder within your Web site folder before you start copying images. This ensures 
that when you copy your Web site to a server, all the images will be transported. Otherwise, you 
may get broken links instead of images on your pages. 

Usually the automatic conversion to GIF works fine, but in some cases there may be degradation. 
For example, if the PICT file is a 24-bit full-color image, you may experience some loss of quality 
converting to GIF, which can only handle 8-bit images. To prevent this, you can use the JPEG 
format, which preserves 24-bit color. Convert the file using any application that can read PICT 
files and save them in JPEG format. You can also use Adobe Photoshop or another image-editing 
program to prepare GIF files for PageMill. Load the PICT file, edit it, change to indexed color, and 
save it as a GIF file. 



Next, use the PageMill Insert Image button to place the picture in your Web pages. If you 
use this method, PageMill does not need to convert the file. 


Inserting an Image 

PageMill offers several ways for you to insert images onto your Web page. You can: 

• Drag and drop an image from another page. 

• Copy and paste an image from another page. 

• Place frequently used images (logos, for example) on the pasteboard and move (drag) or copy 
(Option-drag) them to the page. 

• Use the Insert Image button on the page view button bar. 

• Click this button to display the standard file dialog box. Locate the image you want to insert and 
click the Open button. If the image is already a GIF file, PageMill inserts a reference to it on your 
page. If the image is a PICT file, PageMill saves a copy of the image in the folder specified in Pref¬ 
erences and inserts a reference to the copy, rather than to the original. 

• Copy and paste an image from another application. Make sure the other application copies 
images in PICT format. PageMill creates a new file in the default Images folder. 

• Drag and drop an image from another application, Scrapbook, desktop patterns control panel, 
and so on. 

If the image is already a GIF file, PageMill inserts a reference to it on your page. If the image is a 
PICT file, PageMill saves a copy of the image in the folder specified in Preferences and inserts a 
reference to the copy rather than to the original. 

• Drag the image from the Finder. 

You can drag image file icons into a page directly from the Finder. If the file is already in GIF or 
JPEG format, PageMill references the file, Make sure any images you place using this method are 
in the appropriate Web site folder; otherwise they will not be transferred to the server with the rest 
of the Web site, and viewers will see an Image Not Found icon rather than the image. If the image 
is already a GIF file, PageMill inserts a reference to it on your page. If the image is a PICT file, 
PageMill saves a copy of the image in the folder specified in Preferences and inserts a reference to 
the copy rather than to the original. 


• Use graphics from pages you browse in Netscape. 

Click the image and hold down the mouse button until a popup appears. Use the selections on the 
popup to save the image on your hard disk, or copy them to the Clipboard so you can paste them 
directly into your PageMill document. 


• Drag an image icon from an image view. If you hold down the command W key as you 
drag, PageMill puts a link to the image in the page, rather than inserting the image itself. 




Note: if a file refers to an image that can’t be found on the disk, PageMill will display a “missing image 
file” icon with a question mark and the path of the image it is looking for. This situation could occur 
if, for example, you deleted or moved an image on your disk. To correct this error, simply 
double-click the “missing image file” icon, and use the standard file dialog box to point 
PageMill at an existing image. 

Setting Image Attributes 

You use the Image Attributes Inspector to enter an alternative text label, size and scale the image, 
set the border width, and specify how you are using the image. 

To display the Image Attributes Inspector: 

1 Select the image. 

2 Choose the Show Attributes Inspector command from the Window menu (»-;). 



You can enter a text label for the image in the Alt field so readers who are using text-only browsers, 
or who turn off Load Images to speed up page display, see the label rather than a blank space. 

Use the Width and Height fields to set a specific size for the image. You can choose pixels or a per¬ 
centage of the current size. Select the Scale check boxes to maintain the horizontal or vertical pro¬ 
portions of the image when it is resized. 

You can set the width of the image border in pixels by typing a number into the Border field and 
pressing Return (or Enter). 

You can also choose how you want to use the image on the page. Select on of the Behavior buttons: 
• Picture for a static image. 

. Button to use the image as a Submit button for a form. See “Working with Forms” later m this 
section. 

. Map if you want to create an image map with several hot spots. See “Creating an Image Map 
later in this section. 
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Inserting a Background Image 

To use an image as a page background: 

1 °P en the Attributes Inspector and display the Page Attributes. 

2 Drag an image into the image well on the right side of the Attributes Inspector panel. 
°r 

1 Double-click the image to open the image view. 


To remove a background image: 

[jPg] 1 °P en the Attributes Inspector and display the Page Attributes. 

2 Click the trashcan below the image well. 

Making an Image Background Transparent 

If your image is a GIF file, you can make its background transparent so it blends in with the page. 

To make an image background transparent: 

1 Double-click the image to open the image view. 

a 2 Select the transparency tool and dick the image on its background color. Zoom in if you 
have trouble selecting a small region. 

3 Save the changes and close the image view. 

All pixels of the background color become transparent, and you’ll see the image blend into 
the page. 

To remove the transparent background, repeat the same steps. 

Note: If there is more than one copy of the same image in your pages, all the images will change to 
reflect the transparency. 

Creating an Interlaced (Venetian-Blind Style) Image 

If your image is a GIF file, you can save it so it downloads in layers producing a venetian-blind 
effect, rather than one line at a time. The image initially looks blurry; as each layer is added, it 
comes into focus. This is helpful if you are using large images so the reader doesn’t think it’s taking 
too long for the image to load. '' 
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2 Drop the image icon on top of the 


page icon. 


If you want the image to be downloaded venetian-blind style: 
1 Double-click the image to open the image view. 



2 Click the interlace toggle switch. The icon appears striped to indicate interlacing. 


3 Save the image and close the image view. You will not see any indication of interlacing in the 
page view. 


If the browser being used does not support interlaced images, your image will still display just fine. 


Creating an Image Map 

You can add multiple links to an image by creating an image map. To create an image map, you 
draw hot spots on the image and then add links to the hot spots. When you save the image and 
change to Preview mode, you can click the hot spots to see the linked pages. 

Specifying the Type and Location of the Server 

Before you create an image map, you must let PageMill know which type of server you are using. 
Also, if you are editing your site on a local machine but intend to upload it to a remote server 
machine, you need to specify the root locations of the site on both machines. (This is because the 
map files must be encoded with the server-specific locations of link destinations.) Your Webmaster 
(server administrator) should be able to give you more detailed information on this subject. 

To specify the type of server and the root locations of your site: 

1 Choose the Preferences command from the Edit menu. 

2 Set the Map Format popup to CERN or NCSA as appropriate. 

3 If you are editing your files on one machine but intend to upload your site to a second machine 
that functions as a Web server, click the Remote Server check box. If you are editing directly on the 
same machine that is serving the pages to the network, make sure this check box is not checked. 

If you clicked the Remote Server check box, you also need to: 

• Specify the Local Root folder by clicking the folder icon; use the standard file dialog box to select 
the topmost folder containing your site. 
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• Enter the Server Root Directory specifying the path to the directory where your site resides on 
he remote server In other words, this is the directory location on the server machine that func¬ 
tions as the root dtrectory of your site when it is located on the server. 



Rertote Root'.Dtrei 


Drawing Hot Spots 
To draw hot spots: 

1 Double-click the image to open the image view, or choose the Open command from the File 
menu to open an image stored on your hard drive. 

2 Select a hot-spot shape tool and draw a shape on the image. Drawing hot-spot shapes (rectan¬ 
gles, circles, polygons) in PageMill works the same as in any simple graphics program. After you 
draw a shape you can select it, move it, and reshape it by using the arrow tool. PageMill numbers 
each hot spot as you draw it, with lower-numbered hot spots in front. 



If it s difficult to see the hot-spot shapes and numbers, you can change their colors to make 
them more visible. Click the hot-spot color icon and select a color. 


Layering Hot Spots 

If your hot spots overlap, be sure to layer them correctly so when the reader clicks the hot spot, the 
link you intended appears. Hot spots in front (lower numbers) take precedence over the ones in 
back (higher numbers). 

To change the order in which hot spots are layered, select the hot spot, then click the layer¬ 
ing tool and choose an option from the popup: 

• Bring To Front makes the selected shape number 1. 

• Send To Back moves the selected shape to the bottom layer. 

• Shuffle Forward moves the selected shape forward one layer. 

• Shuffle Back moves the selected shape back one layer. 

If your hot spots do not overlap, you don’t have to worry about layering. 

Adding Links to Hot Spots 
To add a link to a hot spot, you can: 

• Drag a page icon onto the hot spot. 

• Drag an image icon onto the hot spot. 

• Drag an anchor onto a hot spot. 

• Type the link address into the Link Location Bar at the bottom of the image view. Click to the 
right of the globe icon and type an address such as "http://www.school.edu” or “acme.html.” After 
entering the address, press the Return (or Enter) key. 



You can specify a default link to another page so if readers miss the hot spots, they still go to 
another page. Simply place the link anywhere on the image not covered by a hot spot. 
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When you drag a link onto a hot spot, its label is drawn on the image. If this creates too much clut¬ 
ter, you can turn off the label display by clicking the small check box next to the letter A. 
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When you are satisfied with the hot-spot shapes and links, save the image and close the image view. 
When you save the image, a file containing the map is created with the same name as the image 
plus the extension .map. This file is stored in the same folder as the image. The image map is saved 
in the format you set in the Preferences dialog box. 

Deleting Hot Spots 

To delete a hot spot, select it and use the Clear command from the Edit menu, or press the 
Delete key. 

Letting PageMill Know the Image Is a Map 

Before you can test the hot-spot links, you must let PageMiU know that the image should be used 
as a map. 

To let PageMill know the image is a map: 

1 Click the image to select it. 

| EP®| 2 °P en Attributes Inspector (3S-;) and display the Image Attributes. 

3 Select the Map button at the bottom of the Attributes Inspector panel. 

Telling the Server Where to Find the Map 

lo tell the server where to find the image map, check with your Webmaster (server administrator). 
Or you can find a page with an image map that works and look at the specified pathname. 


To enter the image-map location: 
1 Select the image. 


|gg}§{ 2 °P en the Attributes Inspector («-;) and display the Text Attributes. 

3 In the Location field, type the pathname that will let the server know where to find the image. 
The pathname is server-specific, so you have to enter the path for your particular server. (You can 
also specify the pathname by selecting the image and typing the pathname in the Link Location 
Bar at the bottom of the page.) 


If you are using an NCSA server: 

You must specify a script name and the map filename. The pathname you enter in the Location 
field will look something like: 

imagemap-scriptname/mapfile 

where the imagemap-scriptname is the location of the image-map script. This will usually 
be in the server’s cgi-bin directory; for example: www. school. edu/cgi-bin/imagemap. The 
map name is the path to the image map that you created for that specific image; for example: 
-newbie /images /sample .map. Check the NCSA server tutorial for examples and more informa¬ 
tion. 

If you are using Netscape: 

Netsite, the Netscape server, uses a streamlined format to specify image maps in HTML files. The 
pathname is a relative or absolute path to the image map for the image. For example: 

-newbie/images/sample.map 

This makes the HTML file independent of the server configuration. Refer to the Netsite server doc¬ 
umentation for details. 

If you are using a CERN server: 

CERN servers can have a variety of configurations. Refer to information about CERN server click- 
able image support for information. 

WORKING WITH FORMS 

There are two parts to creating an interactive form for the Web: 

• Creating the form itself 

• Creating the interaction with the form 

PageMill helps you with the first step. You can arrange form elements on the page and change their 
content and size. You can also change the surrounding text and images. 

For your form to do something when the reader presses the Submit button, you need to have a 
CGI script associated with the form. The script, which is written in a language like AppleScript or 
Perl, is invoked by the server when the reader presses the Submit button. It receives the data and 
processes it according to the script. A script can simply mail the contents of the form somewhere, 
or perform more complex tasks, such as collecting the data entered in the form in a database or 
generating a new page based on the form’s content. The options are unlimited. 
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Programming experience is required to create a script, information about script creation is 
beyond the scope of PageMill and this user’s guide, so you’ll probably need some technical help to 
create an action script for your form. 

Creating a Form 

To create a form, you simply insert the form elements, drag them into position, and edit them. 

If you’re planning to reuse form elements, you can drag them to the pasteboard for use on the same 
page or on other pages. 

To insert a form element, position the cursor where you want to locate the element and click the 
appropriate button on the button bar. 
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Password 

field 


Submit 

button 


Radio - 
button 


Text 

field 
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Popup 


Reset * 
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1 he following topics provide information about editing each form element and setting its 
attributes. To set the attributes, you select the form element, open the Attributes Inspector 
and display the Object Attributes. 


Adding Radio Buttons and Check boxes 

Radio buttons work as a group. Readers are forced to select only one item in the group. For exam¬ 
ple, if a question requires a yes or no answer, radio buttons are the appropriate control to collect 
this information. 



To create a radio button group, start by inserting a single radio button on the page. Copy the but¬ 
ton by using the Copy command from the Edit menu (3*-C) or by holding down the Option key 
while dragging the button. When you clone radio buttons in this way, they automatically belong 
to the same group. 


If you look at the Object Attributes for the radio buttons you create by copying, you’ll note they 
all have the same default name. If you change the name for one button, be sure to change it for all 
the radio buttons in the group; otherwise they will work independently. You can also create a 
group of radio buttons by inserting them individually and assigning the same name in the 
Attributes Inspector. 



To capture information about which radio button the reader selects, you need to give it a value, 
which will be sent to the server when data is transmitted. In the Value field in the Attributes 
Inspector dialog box, enter a value for each button that matches the value included in the CGI 
script associated with the form. You might want to give the buttons values that correspond to what 
they represent. For example, if the buttons represent “yes” and “no” responses, yes and no could 
be the values you enter in the corresponding Attributes Inspector. Work with the script program¬ 
mer to determine the values. 

To set the default radio button, select the Checked check box in the Attributes Inspector for the 
button you want as the default, or double-click the radio button itself while in Edit mode and click 
it to turn it on. 

Use check boxes if you want the reader to be able to choose several items from a list. Because each 
check box functions independently, you can create each one by clicking the Insert Checkbox but¬ 
ton, or by copying or cloning the first one. 



















Each check box has the same default name in the Attributes Inspector. You can leave the names as 
t ey are, or change them. As with radio buttons, you need to enter a value so the server can inter¬ 
pret the data correctly. For clarity, the value should correspond to the meaning of the check box. 
For example, if you were asking for color preferences, the values might be “red,” “green,” “blue,” 
and so on. Again, work with the script programmer to determine the values. 



To determine the default state of each check box, select or clear the Checked check box in the cor¬ 
responding Attributes Inspector, or double-click the check box itself while in Edit mode and click 
to turn it on. 

Adding Text Fields 

You can use several types of text fields when designing a form: single-line or simple text fields, 
password fields, and multiline text areas. 

Use a single-line text field when you want the reader to enter specific information that would be 
difficult or impossible to collect using radio buttons, check boxes, or a scrollable list. Good exam¬ 
ples are names, telephone numbers, and filenames. 

First type the label for the field—for example, “Name:”. Then insert the text field. If you want to 
add default text to the field in addition to the label (or instead of the label), double-click the field 
and type the text. For example, you might want to guide a reader by inserting “Type your name 
here ’ in the appropriate field. You can only insert a single line of default text in these fields and the 
reader is limited to a single-line response. 


Password fields are special cases of single-line text fields. The difference is that when a reader enters 
text into the password field, a series of asterisks appears rather than the text. 



You resize single-line and password text fields by selecting them and dragging the selection handle, 
or by entering a new value in the Size field of the Object Attributes Inspector. When you change 
the number in the Attributes Inspector and press Return (or Enter), the field on the page changes 
appropriately. The reverse is also true—changes you make directly to the size of the text field are 
reflected in the Attributes Inspector. You can also set a maximum length in the Attributes Inspec¬ 
tor. If the reader types text that exceeds the maximum length, the field stays the same size and the 
text scrolls to the left. 

If you need to insert a large block of default text into a form, or anticipate lengthy responses from 
your readers, insert a multiline text area. 



You can resize a text area by selecting it and dragging the selection handles, or by setting the num¬ 
ber of rows and columns displayed in the Object Attributes Inspector. The text area appears with 
vertical and horizontal scroll bars so the reader can enter as much or as little text as is required. 

Adding a Popup Menu or List Selection Field 

If you want to offer readers a choice of several items, insert a popup menu. You can easily convert 
the popup to a list selection field. 

To enter the choices in a popup, double-click it, select all the default options (3£-A), and type the 
options you want to use, pressing Return after each. To set the default, drag the triangle next to the 
option you want to set as the default. Readers are forced to make a single selection from the popup. 
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If you want to display several options, or allow readers to make multiple selections, convert the 
popup to a list selection field. Select the popup and drag the bottom resize handle so several items 
are displayed. 


Alternatively, you can set the Items Visible field in the Object Attributes Inspector to specify the 
number of options you want to display. To allow readers to make multiple selections, select the 
Allow Multiple Selections check box. To specify which items should be selected by default, double¬ 
click the list selection field—it expands to reveal check boxes to the right of the text. Toggle the 
check boxes to turn a list item on or off. 

If readers hold down the Shift key while selecting from the list, they can select several contiguous 
items; if they hold down the 3? key, they can select items that are not contiguous. 

Adding Submit and Reset Buttons 

There are two special-purpose buttons you can include on a form: Submit and Reset. 

After readers finish filling out a form, they need to send the information to the server. You add a 
Submit button to accomplish this. 


To edit the Submit button label, double-click the button and type the new text. The button resizes 
automatically to accommodate the new label. Each form should have only one Submit button. 

You can also use an image as a Submit button: 

1 Select the image that you want to use as a button. 

2 Open the Attributes Inspector (3S-;) and display the Object Attributes. 

3 Click Button in the Behavior radio button group. 

a Display the Page Attributes and enter the name of the associated CGI script in the 
Location field. 






When the reader clicks the image, the data in the form is sent to the server and the CGI script 
is invoked. 

Sometimes readers will be unhappy with their responses and will want to start over. You can pro¬ 
vide a Reset button to clear the form and reset the defaults. You edit the Reset button in the same 
way you edit the Submit button. 


Associating an Action Script with the Form 

As explained earlier, you need a CGI script to make your form do something with the data a reader 
fills in. Although script creation is beyond the scope of PageMill, you need to set the form 
attributes so the controls can communicate with the script. You’ll need to work with the program¬ 
mer developing the CGI script to be sure you enter the appropriate information. 

Note: Currently, PageMill does not support multiple forms (scripts) on a single page. 

To associate the appropriate CGI script with a form: 

|jg|-g|| 1 Open the Attributes Inspector (K-;) and display the Page Attributes. 

2 In the Action text box, type the pathname for the CGI script and press Return. 


You must also specify how information from the forms should be transmitted to the CGI script. 
To do this, select Get or Post from the popup in the Page Attributes Inspector. In most cases you 
should choose Post (which is the default), because it imposes no limitations on the amount of 
information you can send to the server. 


Usually scripts collect the contents of a form by asking for the values of various controls. To 
accomplish this, you give each control a name, which you set with the Attributes Inspector. By 
default, PageMill attempts to give each control a unique name (check box, radio######), but it is 
a good idea to give them more meaningful names. Work with the CGI programmer to determine 
what field names to use. 


To name a control: 



Open the Attributes Inspector (3£-;) and display the Object Attributes. 


2 Type the control name into the Name field and press Return (or Enter). 


Some controls also require that you enter a value to return to the server. See the individual control 
descriptions above for information. 
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Chapter 4: Command Key Equivalents 

n general, PageMill employs the following scheme for command keys. 

Style commands are invoked by using the command key (36), the Shift key, and some 
third key. The only exception to this rule is the command key equivalents for bold and 
italic, in which case PageMill defaults to the common convention of using 36-B for bold and 36-1 
for italic. 

Format commands are invoked by using the 36 key, the Option key, and some third key. Buttons 
in the button bar at the top of a page window can be invoked by using the 36 key, the Control key, 
and some third key. 

The “insert element” buttons (horizontal rule through reset button) can be invoked from the key¬ 
board by holding down the 3? key, the Control key, and a number between 0-9. Which number 
to use depends on the layout of the keyboard relative to the position of the button in the page win¬ 
dow—the leftmost button (horizontal rule) corresponds to the leftmost numeric key (1), and the 
rightmost button (reset button) corresponds to the rightmost numeric key (0). 

The browse button is toggled by holding down the 36 key, the Control key, and the spacebar. The 
text alignment buttons are invoked by holding down the 36 key, the Control key, and either the left 
arrow key for left alignment or the right arrow key for right alignment. The image alignment but¬ 
tons are invoked by holding down the 36 key, the Control key, and either the up arrow key for top 
alignment or the bottom arrow key for bottom alignment. The centered alignment button is 
invoked by holding down the 36 key, the Control key, and the arrow key corresponding to the cur¬ 
rent alignment state. For example, if a selected image is currently top aligned, holding down the 
36, Control, and up arrow keys will invoke the center alignment button. 










Appendix A: Troubleshooting 


If you have a problem while using PageMill, you can contact Adobe technical support for help. 
Before you contact support, check the following list of common problems and their solutions. 

COMMON PROBLEMS 

• If you can’t select or edit anything on a page, make sure you are in Edit mode rather than 
Preview mode. The toggle button in the upper right corner of the page should display the pen and 
paper icon rather than the globe icon. 

• If you can’t drop anything onto a page, make sure you are in Edit mode rather than Preview 
mode. The toggle button in the upper right corner of the page should display the pen and paper 
icon rather than the globe icon. 

• If there is no page icon next to the title field at the top of the page, it means you haven’t saved 
the page. Save the page and the icon will appear. 

• If the hot spots in your image map are not active, make sure the Attributes Inspector for the 
image is set to Map. 

• Remember that PageMill is not a Web browser. Preview mode is designed so you can test links 
locally to make sure they work as you intended. 

• If you find you are running out of memory when using PageMill, try increasing the PageMill 
memory partition by using the Get Info command. Close PageMill, click it once in the Finder, and 
choose Get Info from the File menu. In the PageMill Info window, double-click the Minimum size 
and type a new number. The Minimum size should not be less than the Suggested size. 

• If you open an HTML file and see a lot of red text, there is probably an error in the file (overlap¬ 
ping tags, illegal uses, etc.), or it could be a non-HTML file. The easiest way to fix a “bad” file is to 
remove the red text, edit the page in PageMill, and save a new HTML file. 
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Appendix B: Uploading Your Web Site 
to a Server 

To get your pages on the Web you need to transfer them from your hard disk to a Web server. The 
server can be on any platform: Macintosh, UNIX, or Windows NT. 

Whenever you transfer your Web site to a server, be sure all your files and subfolders are in a single 
folder. By default, converted GIF images are saved into a folder called Images on your hard disk. 
Unless you are planning to transfer that folder to your server, use the PageMill Preferences dialog 
box to select the folder where you want to save converted GIF images before you start building 
your site. Make sure this folder is within your Web site folder. 

Once you have the folders set up, do not move files to other folders. If you move files, you may 
break links without noticing. 

If you have file access (which is often the case with Macintosh servers), just drag the folder con¬ 
taining your Web site into the server’s folder (or to an alias). 

If you do not have file system access to a Web site (it does not appear as a volume or folder on your 
desktop), but only FTP access (UNIX-like networking access), you need to use an application 
called Fetch to transfer your files from your hard disk to the server. Fetch is available from the Mac¬ 
intosh Hyperarchive at http://hyperarchive.lcs.mit.edu/Hyperarchive.html. Search for Fetch or 
Compact Pro. 

When you use Fetch: 

• Always use binary mode (not automatic). If Fetch asks you for the file type, the answer is raw 
binary. 

• Do not include spaces in filenames or characters other than A-Z, a.-z, 0-9, _, and -. (If you 
include spaces, Fetch converts them to underscores. This breaks all your links, because it is a 
change in filename.) 

• Be aware that UNIX is case-sensitive, so Test.html and test.html are two distinct filenames. 

Once your pages are loaded onto a Web server, you still need an Internet Service Provider (ISP) to 
transmit your Web pages to the world. The ISP runs a Web server (usually on a UNIX machine) 
to transmit your pages. To create or edit the pages, you use PageMill. Work on a local copy of your 
Web site on your hard disk and when ready, connect to your ISP and transmit the pages. Editing 
and transmission are two separate functions. After transmission, you can disconnect again. You 
don’t need to be connected while using PageMill. 
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Many larger companies are connected directly to the Internet and run the Web server software that 
transmits the pages on a local machine. In that case, you do not need an extra ISP—but you do 
need to talk to your company’s Web administrator (“Webmaster”) to put your pages on the server. 

If you are not broadcasting your pages, but only using them internally within your company, put 
the pages on a file server volume visible to the people you want to read your pages. They can then 
point their browser at those files. 



Appendix C: Resource Guide 

Here are some pointers to useful information about the World Wide Web and HTML. 

General Information About the World Wide Web 

• Everything you ever wanted to know about the Web: 

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/ 

• Books on the Web: 

http://www.yahoo.com/Business_and_Economy/Products_and_Services/Books/Internet/ 

World_Wide_Web/ 

Check out Spinning the Web by Andrew Ford, World Wide Web Unleashed , Laura Lemay’s Teach 
Yourself Web Publishing with HTML in a Week , and the HTML Manual of Style. 

• Jon Wiederspan has posted some excellent tutorials on Macintosh and the Web at: 

http://www.uwtc.washington.edu/Computing/WWW/Mac/Directory.html 

• For WWW developer resources, including general information about the Web, HTML writing 
guides, and cross-platform tools: 

http://rashoman.tjp.washington.edu/Computing/WWW/Documentation.html 

Information About HTML 

• Everything you ever wanted to know about HTML (specifications, guides, tutorials): 

http://www.yahoo.com/Computers_and_Internet/Software/Data_Formats/HTML/ 

• HTML version 3 specs: 

http://www.hp.co.uk/people/dsr/html3/Contents.html 

• HTML version 2 specs: 

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html 

Information About Image Maps 

• General information: 

http://www.yahoo.com/Computers_and_Internet/lnternet/World_Wide_Web/Programming/ 

Imagemaps/ 

On that page, look at http://www/cris.com/~automata“/tutorial.shtml 
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• Lessons on creating image maps for Macintosh Web servers: 
http://www.uwtc.washington.edu/Computing/WWW/Lessons/Map.html 

• Macintosh image-map processing (MapServe): 

MapServe is a CGI application for processing map graphics. It uses NCSA-style map-definition 
files to decide how to map user clicks. It also provides a log window to show recent map usage. The 
next release (now in final code) will allow it to be used as an ACTION as well. Check the home 
page for instructions about the new MapServe mailing list. 

Kelly Campbell (camk@ksu.edu) 

Home page: http://www.spub.ksu.edu/other/machttp_tools/mapserve/ 

Release version: Version 1.5 (6/4/95 - 99K) 

Latest version: Version 1.6 beta 1 (7/1/95) 

Written in CodeWarrior C, Native PPC, uses imagemap.c code 

Macintosh CGI Scripts 

• Macintosh CGI scripts (for forms processing, email, database access, file processing, image 
maps, etc.): 

http://www.uwtc.washington.edu/Computing/WWW/Mac/CGI.html 

Netscape 

• Netscape backgrounds: 

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/ 

Backgrounds/ 

Fetch 

• If you need Fetch to upload your Web site to the server, you can find it in the Macintosh Hyper¬ 
archive at: 

http://hyperarchive.lcs.mit.edu/HyperArchive.html 
Search for Fetch or CompactPro. 
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Glossary 

address The place on the Web where a page is located. Generally referred to as the URL. 
alias An alternative label. 

ANCHOR A type of link. 

browser A program used to look at Web pages. The appearance of a page is determined by the 
specific browser used to view it (and the size of the viewing window). 

cgi See common gateway interface. 

common gateway interface An interface between World Wide Web servers and scripts, utili¬ 
ties, and programs. 

file transfer protocol The Internet protocol used to transfer files. Also a program. 
ftp See file transfer protocol. 
href See hypertext reference. 

HTML See Hypertext Markup Language. 
http See Hypertext Transfer Protocol. 

hypertext reference The address of the destination of a hypertext link. 

hypertext markup language The document formatting language understood by World Wide 
Web browsers. 

hypertext transfer protocol The Internet protocol used to transfer documents between sys¬ 
tems. The World Wide Web is based on this protocol. 

link A hypertext reference to another page or another location on the same page. 

universal resource location An address of a page on the World Wide Web. It includes the 
appropriate protocol, the system, path, and filename. 

url See Universal Resource Location. 

WWW World Wide Web. 





